import { Component } from "react";
import { Picker, Cell } from "@nutui/nutui-react-taro";
import styles from "./index.scss";

import Taro from "@tarojs/taro";
import { useState } from "react";

import { ArrowRight } from "@nutui/icons-react-taro";
import { formatDate, calculateTime } from "@/utils/repeated";
const options = [
  { value: 1, text: "全部", days: 10000 },
  { value: 2, text: "近一个月", days: 30 },
  { value: 3, text: "近三个月", days: 90 },
];

export default (props) => {
  const { timeRangeChange = () => {}, defaultValue = 2 } = props;
  const [visible, setVisible] = useState(false);
  const [pickerValue, setPickerValue] = useState(defaultValue);

  const confirmPicker = (list, values) => {
    setPickerValue(list[0].value);

    timeRangeChange({
      startDate: calculateTime(
        -options?.filter((x) => x.value === list[0].value)[0]?.days
      ),
      endDate: calculateTime(7),
    });
  };

  return (
    <view
      className={styles.timeRangePicker}
      onClick={() => setVisible(!visible)}
    >
      <view>时间：</view>
      <view>{options?.filter((x) => x.value === pickerValue)[0]?.text} </view>
      <ArrowRight width={"12px"} style={{ marginLeft: "4px" }} />
      <view >
      <Picker
        visible={visible}
        defaultValue={[pickerValue]}
        options={options}
        onConfirm={(list, values) => confirmPicker(list, values)}
        onClose={() => setVisible(false)}
        // onChange={changePicker}
      />
      </view>
    
    </view>
  );
};
